<template>
  <div class="v-nav">
    <ul>
      <router-link to="/index" tag="li">
        <i class="icon1 nav-item"></i>
      </router-link>
      <router-link to="/bourn" tag="li">
        <i class="icon2 nav-item"></i>
      </router-link>
      <router-link to="/find" tag="li">
        <i class="icon3 nav-item"></i>
      </router-link>
      <router-link to="/order" tag="li">
        <i class="icon4 nav-item"></i>
      </router-link>
      <router-link to="/my" tag="li">
        <i class="icon5 nav-item"></i>
      </router-link>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "",
  data() {
    return {};
  },
  components: {},
  methods: {}
};
</script>

<style lang="stylus" scoped>
.v-nav {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1rem;
  background-color: #fff;

  ul {
    display: flex;
    justify-content: space-around;

    .nav-item {
      display: block;
      margin: 0 auto;
      height: 40px;
      width: 40px;
      margin-top: 2px;
      overflow: hidden;
      background-image: url('../../assets/images/home2017v5.png');
      background-size: 320px 184px;
      background-repeat: no-repeat;
    }

    .router-link-active {
      .icon1 {
        background-position: 0 -144px;
      }

      .icon2 {
        background-position: -80px -145px;
      }

      .icon3 {
        background-image: url('../../assets/images/bar-found-open.png');
      }

      .icon4 {
        background: url('../../assets/images/customer-service-open.png') center no-repeat !important;
        background-size: auto 100% !important;
      }

      .icon5 {
        background-position: -240px -144px;
      }
    }

    .icon1 {
      background-position: -40px -144px;
    }

    .icon2 {
      background-position: -120px -145px;
    }

    .icon3 {
      background-image: url('../../assets/images/bar-found.png');
      background-size: 25px 40px;
      background-position: center center;
    }

    .icon4 {
      background: url('../../assets/images/customer-service.png') center no-repeat !important;
      background-size: auto 100% !important;
    }

    .icon5 {
      background-position: -280px -144px;
    }
  }
}
</style>